<template>

  <div class="card-contain">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: "DataCard"
}
</script>

<style scoped>

.card-contain{
  padding: 24px 36px;
  background-color: white;
  margin: 16px 24px;

  border: 1px rgba(64, 72, 91, 0.20) solid;
  border-radius: 12px;
}

.card-header{
  margin-bottom: 12px;
  color: #6c757d;
}

.card-content{

}

.card-footer{
  padding-top: 8px;
}


</style>